<template>
  <div class="common-layout">
    <div class="with-border pulse-candidate-area">
      <el-checkbox v-model="selectAllPulse" label="全选" size="large" />
      <div class="content-wrapper">
        <div class="section-title">这里是脉冲型故障待选区</div>
        <div class="section-description">四个区域所有故障相加应超过20个</div>
        <div class="items-placeholder">（脉冲型故障项目列表区域）</div>
      </div>
    </div>

    <div class="with-border other-fault-type-area flex headToolbar">
      <el-checkbox v-model="selectAllStep" label="全选" />
      <span class="fault-type-label">这里是阶跃型故障待选区</span>
    </div>
    <div class="with-border other-fault-type-area flex headToolbar">
      <el-checkbox v-model="selectAllMonotonic" label="全选" />
      <span class="fault-type-label">这里是单调周期型故障待选区</span>
    </div>
    <div class="with-border other-fault-type-area flex headToolbar">
      <el-checkbox v-model="selectAllCyclic" label="全选" />
      <span class="fault-type-label">这里是循环周期型故障待选区</span>
    </div>

    <el-row class="toolbar-wrapper with-border" align="middle" :gutter="10">
      <el-col :xs="24" :sm="4" :md="3">
        <el-button type="primary" @click="startProcess" style="width: 100%;">开始</el-button>
      </el-col>
      <el-col :xs="12" :sm="5" :md="3"><div class="status-box">待测总数: {{ totalToTest }}</div></el-col>
      <el-col :xs="12" :sm="3" :md="2"><div class="status-box">脉冲: {{ pulseCount }}</div></el-col>
      <el-col :xs="12" :sm="3" :md="2"><div class="status-box">阶跃: {{ stepCount }}</div></el-col>
      <el-col :xs="12" :sm="5" :md="4"><div class="status-box">单调周期: {{ monotonicCount }}</div></el-col>
      <el-col :xs="12" :sm="5" :md="4"><div class="status-box">循环周期: {{ cyclicCount }}</div></el-col>
      <el-col :xs="12" :sm="4" :md="3"><div class="status-box active-status">准确率: {{ accuracyRate }}%</div></el-col>
      <el-col :xs="0" :sm="0" :md="3"></el-col>
    </el-row>

    <el-row :gutter="15" class="bottom-section">
      <el-col :md="15">
        <div class="chart-area with-border">
          <p class="section-header">脉冲型、阶跃型、单调周期型、循环周期型故障的分类模型预测概率</p>
          <p class="section-subheader">（应该是四个折线图，随模型运行而刷新）</p>
          <el-row :gutter="10">
            <el-col :span="12"><div class="chart-placeholder">图表1 (脉冲)</div></el-col>
            <el-col :span="12"><div class="chart-placeholder">图表2 (阶跃)</div></el-col>
            <el-col :span="12"><div class="chart-placeholder">图表3 (单调)</div></el-col>
            <el-col :span="12"><div class="chart-placeholder">图表4 (循环)</div></el-col>
          </el-row>
        </div>
      </el-col>
      <el-col :md="9">
        <div class="log-area with-border">
          <p class="section-header">计算 Log</p>
          <el-input
            type="textarea"
            :rows="12"
            placeholder="计算日志将会显示在这里..."
            v-model="logContent"
            readonly
            class="log-textarea"
          ></el-input>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';

// Refs for checkboxes
const selectAllPulse = ref(false);
const selectAllStep = ref(false);
const selectAllMonotonic = ref(false);
const selectAllCyclic = ref(false);

// Refs for status display (example data)
const totalToTest = ref(123);
const pulseCount = ref(32);
const stepCount = ref(28);
const monotonicCount = ref(33);
const cyclicCount = ref(30);
const accuracyRate = ref(96.8);

// Ref for log content
const logContent = ref('');

// Method for start button
const startProcess = () => {
  console.log('开始处理...');
  logContent.value += `${new Date().toLocaleTimeString()}: 指令已发送，开始处理...\n`;
  setTimeout(() => {
    logContent.value += `${new Date().toLocaleTimeString()}: 数据加载完成，准备分析。\n`;
  }, 1000);
  // ... more log updates
};
</script>

<style scoped lang="scss">
/* Styles from user's previous code & theme requests */
.common-layout {
  padding: 20px;
  background-color: transparent; /* Overall background transparent */
  color: #ffffff;               /* Default white text */
}

.with-border {
  width: 100%;
  border: 1px solid #ccc;
  padding: 6px;
  border-radius: 16px;
  background-color: transparent; /* Explicitly transparent */
  justify-content: space-around;
  box-sizing: border-box;
  margin-bottom: 10px;
}
.with-border:last-child {
    margin-bottom: 0;
}

.headToolbar {
  height: 50px;
}

.flex {
  display: flex;
  align-items: center;
}

.no-padding {
  padding: 0 !important;
}

/* Global el-row styling from user's previous code */
:deep(.el-row) {
  margin-bottom: 6px;
}
:deep(.el-row:last-child) {
  margin-bottom: 0;
}

/* Styles for the new UI, adapted to the transparent theme */
.pulse-candidate-area {
  .el-checkbox {
    align-self: flex-start;
    margin-top: 2px;
    margin-right: 10px;
  }
  .content-wrapper {
    display: flex;
    flex-direction: column;
  }
  .section-title {
    font-size: 1.1em;
    font-weight: 600;
    margin-bottom: 4px;
  }
  .section-description {
    font-size: 0.9em;
    margin-bottom: 10px;
    color: #bdc3c7; // Slightly dimmer white
  }
  .items-placeholder {
    min-height: 60px;
    background-color: transparent; // Transparent
    margin-top: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    font-style: italic;
    border: 1px dashed rgba(204, 204, 204, 0.5); // #ccc with alpha for dashed border
    padding: 10px;
    color: #bdc3c7; // Dimmer white for placeholder text
  }
}

.other-fault-type-area {
  gap: 15px;
  .fault-type-label {
    font-size: 1em;
  }
}

.toolbar-wrapper {
  // padding: 6px !important; // Inherits from .with-border
}

.status-box {
  padding: 8px 6px;
  border: 1px solid #ccc; // User's border color
  background-color: transparent;
  text-align: center;
  font-size: 0.8em;
  border-radius: 8px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.active-status {
  background-color: transparent; // Transparent background
  color: #e67e22; // Orange text to indicate active status
  border: 2px solid #e67e22; // Orange border
  font-weight: bold;
  // To make text white as per "all text white" and still distinct:
  // color: #ffffff;
  // border: 2px solid #e67e22; /* Prominent orange border */
  // box-shadow: 0 0 5px #e67e22; /* Optional glow */
}

.bottom-section {
  // margin-top: 0; // Handled by .with-border or el-row margin
}

.section-header {
  font-size: 1.1em;
  font-weight: 600;
  margin-top: 0;
  margin-bottom: 8px;
}
.section-subheader {
  font-size: 0.9em;
  margin-top: 0;
  margin-bottom: 10px;
  color: #bdc3c7;
}

.chart-area {
  min-height: 250px;
  .chart-placeholder {
    height: 80px;
    background-color: transparent; // Transparent
    border: 1px dashed rgba(204, 204, 204, 0.5); // #ccc with alpha
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 6px;
    border-radius: 8px;
    font-size: 0.9em;
    padding: 10px;
    color: #bdc3c7; // Dimmer white for placeholder text
  }
}

.log-area {
  background-color: transparent; // Log area background transparent
  color: white; // Default text color
  min-height: 250px;
  display: flex;
  flex-direction: column;
  // .with-border gives it border: 1px solid #ccc;
  .section-header {
    color: white;
  }
  .log-textarea {
    flex-grow: 1;
    :deep(.el-textarea__inner) {
      background-color: transparent; // Textarea background transparent
      color: #ffffff;               // Text white
      border: 1px solid #ccc !important; // Border consistent with .with-border
      height: 100% !important;
      font-family: "Courier New", Courier, monospace;
      font-size: 0.85em;
      border-radius: 8px; // Consistent inner radius
    }
  }
}

:deep(.el-checkbox__label) {
  color: #ffffff !important;
  font-size: 0.9em;
}
:deep(.el-checkbox__inner) {
  background-color: transparent !important;
  border-color: #ccc !important; // Checkbox border consistent with #ccc
}
:deep(.el-checkbox.is-checked .el-checkbox__inner) {
  background-color: var(--el-color-primary) !important;
  border-color: var(--el-color-primary) !important;
}
:deep(.el-checkbox.is-checked .el-checkbox__label) {
  color: var(--el-color-primary) !important;
}

@media (max-width: 576px) {
  .status-box {
    font-size: 0.7em;
    padding: 4px;
    height: 30px;
  }
  .toolbar-wrapper .el-col {
    margin-bottom: 6px;
  }
   .toolbar-wrapper .el-col:last-child {
    margin-bottom: 0;
  }
}
</style>